<!-- 订单展示 -->
<template>
  <div class="order_main">
    <el-card>
      <div slot="header">
        <span>订单列表</span>
      </div>
      <el-row :gutter="30">
        <el-col :span="6">
          <el-input v-model="search.username" size="small" placeholder="用户名/模糊查询" />
        </el-col>
        <el-col :span="6">
          <el-select v-model="search.status" size="small" clearable placeholder="订单状态">
            <!-- 订单状态 0 未付款; 1 已付款 ;  2 已发货; 3: 已收货; 9 申请退款 -->
            <el-option v-for="(v,key) in orderStatusObj" :key="v" :label="v" :value="key" />
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select v-model="search.statusend" size="small" clearable placeholder="是否关闭">
            <el-option label="正在进行" value="0" />
            <el-option label="已关闭" value="1" />
          </el-select>
        </el-col>

        <el-col :span="6">
          <el-button type="default" size="mini" @click="doReset">重置</el-button>
          <el-button type="primary" size="mini" @click="doSearch">搜索</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 表单展示 -->
    <el-card class="content box card" shadow="never">
      <el-table v-loading="loading" :data="orderList" border stripe>
        <el-table-column type="index" :width="50" />
        <el-table-column align="center" prop="username" label="用户账号" :width="160" />
        <el-table-column align="center" fixed label="订单状态" :width="160">
          <template slot-scope="scope">
            <span v-show="scope.row.orderStatus==0" style="color:gray">未付款</span>
            <span v-show="scope.row.orderStatus==1" style="color:orange">已付款</span>
            <span v-show="scope.row.orderStatus==2" style="color:blue">已发货</span>
            <span v-show="scope.row.orderStatus==3" style="color:green">已收货</span>
            <span v-show="scope.row.orderStatus==9" style="color:red">申请退款</span>
            <!-- {{ scope.row.orderStatus }} -->
          </template>
        </el-table-column>
        <el-table-column align="center" prop="orderId" label="订单编号" :width="200" />
        <el-table-column align="center" prop="addTime" label="添加时间" :width="200" />

        <el-table-column align="center" label="订单金额" :width="160">
          <template slot-scope="scope">
            <span>{{ scope.row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="count" label="订单数量" :width="160" />

        <el-table-column align="center" prop="payType" label="支付类型" :width="160" />

        <el-table-column align="center" prop="statusend" label="是否关闭" :width="160">
          <template slot-scope="scope">
            <span v-if="scope.row.statusend=='1'" style="color: red;">已关闭</span>
            <span v-else style="color: green;">正在进行</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="doneTime" label="完成时间" :width="160" />

        <el-table-column align="center" label="操作" fixed="right"s :width="250">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="goDetail(scope.row.orderId)">查看订单</el-button>
            <el-button size="mini" type="danger" @click="goDele(scope.row.orderId)">删除订单</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="page.start"
        :page-sizes="page.sizes"
        :page-size="page.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.totalCount"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
import orderApi from "@/api/order/index";
export default {
  data() {
    return {
      orderList: [],
      search: {},
      page: {
        start: 1,
        limit: 10,
        sizes: [10, 30],
        totalCount: 0,
      },
      loading: false,
      orderStatusObj: {
        "0": "未付款",
        "1": "已付款",
        "2": "已发货",
        "3": "已收货",
        "9": "申请退货",
      },
    };
  },
  computed: {},
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    doReset() {},
    doSearch() {},
    doSearch() {
      // 搜索search里的数据发送过去，重新请求列表数据
      this.page.start = 1;
      this.init();
    },
    goDetail(id) {
      this.$router.push({ name: "orderDetail", params: { id: id } });
    },
    // 页面变化
    sizeChange(v) {
      this.page.limit = v;
      this.init();
    },
    currentChange(v) {
      this.page.start = v;
      this.init();
    },
    // 删除订单
    goDele(id) {
      orderApi.dangerDele({ id }).then((res) => {
        this.$message({
          message: "删除成功",
          type: "success",
        });
        this.init();
      });
    },
    // 初始化列表
    init() {
      orderApi
        .orderList({
          ...this.search,
          start: this.page.start,
          limit: this.page.limit,
        })
        .then((res) => {
          console.log(res);
          this.orderList = res.data.list;
          this.page.totalCount = res.data.totalRow;
        });
    },
  },
};
</script>

<style lang='scss' scoped >
.order_main {
  margin: 30px;
}
</style>
